import { Button, Modal } from 'antd';
import { FC } from 'react';

import { Content } from '@/components/base/Content';
import { useDictStore } from '@/store/dict';

import { ApiModelAdd, ApiModelAddRef } from './components/ApiModelAdd';
import { ApiTable, ApiTableRef } from './components/ApiTable';

export const Component: FC = () => {
  const { fetchDictData } = useDictStore();
  const [visible, setVisible] = useState(false);
  const [title, setTitle] = useState('新增模型API');
  // TODO: 暂时写死any，后面需要根据表格的data去设置类型
  const [rowData, setRowData] = useState<any>(null);
  const [activeStep, setActiveStep] = useState<number>(0);
  const [executeDone, setExecuteDone] = useState<boolean>(false);

  const apiModelAddRef = useRef<ApiModelAddRef>(null);
  const apiTableRef = useRef<ApiTableRef>(null);

  const handleEdit = (row?: any) => {
    setVisible(true);
    setRowData(row);
    if (row && row.id) {
      setTitle('修改模型API');
      setRowData(row);
    } else {
      setTitle('新增模型API');
    }
  };

  const init = () => {
    setActiveStep(0);
    if (apiModelAddRef.current) {
      apiModelAddRef.current && apiModelAddRef.current?.initData(rowData);
    }
  };

  const lastStep = () => {
    apiModelAddRef && apiModelAddRef.current?.last();
  };

  const nextStep = () => {
    apiModelAddRef && apiModelAddRef.current?.save();
  };

  const handleClosed = (refresh?: boolean) => {
    setVisible(false);
    refresh && apiTableRef && apiTableRef.current?.tableRequest();
  };

  const handleRefresh = (refresh?: boolean) => {
    refresh && apiTableRef && apiTableRef.current?.tableRequest();
  };

  const handleConfirm = () => {
    apiModelAddRef && apiModelAddRef.current?.handleConfirm();
  };

  useEffect(() => {
    fetchDictData();
  }, [fetchDictData]);

  return (
    <div className="api h-full" style={{ height: 'calc(100% - 5rem)' }}>
      <Content title="模型API" className="w-full h-full">
        <div className='flex justify-end py-12'>
          <Button type="primary" onClick={handleEdit}>新增</Button>
        </div>
        <ApiTable ref={apiTableRef} handleEdit={handleEdit} />
        <Modal
          title={title}
          open={visible}
          width={1000}
          onOk={handleConfirm}
          destroyOnClose
          maskClosable={false}
          onCancel={() => setVisible(false)}
          footer={() => (
            <>
              <Button onClick={() => setVisible(false)}>取消</Button>
              {activeStep > 0 && <Button onClick={lastStep}> 上一步 </Button>}
              {activeStep === 0 && <Button type="primary" onClick={nextStep}> 下一步 </Button>}
              {activeStep > 0 && <Button type="primary" disabled={!executeDone} onClick={handleConfirm}>
                确定
              </Button>}
            </>
          )}
        >
          <ApiModelAdd
            ref={apiModelAddRef}
            onInit={init}
            onActiveStep={(step: number) => setActiveStep(step)}
            onExecute={(execute: boolean) => setExecuteDone(execute)}
            onClosed={(refresh: boolean) => handleClosed(refresh)}
            onTableRequest={(refresh: boolean) => handleRefresh(refresh)}
          />
        </Modal>
      </Content>
    </div>
  );
};

Component.displayName = 'Api';
